<template>
	<view class="container">
		<view class="topFixed">
			<view class="topNav">
				<view class="topNav-min d-rn d-jb d-ac">
					<image src="../../static/img/head.png" mode=""> </image>
				</view>
			</view>
		</view>
		<view class="tips d-rn d-ac d-jb">
			<text></text>
			<!-- <text class="d-rn d-ac d-jc" @click="handleChangeLang">{{
        lanSts == 0 ? $t('simplified') : lanSts == 1 ? $t('traditional') : lanSts == 2?$t('english'):$t('simplified')
      }}</text> -->
			<text class="d-rn d-ac d-jc">
				<picker @change="bindPickerChange" :value="lanSts" :range="list">
					<view class="uni-input">{{list[lanSts]}}</view>
				</picker>
			</text>
		</view>
		<view class="logo d-rn d-ac d-jc">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="form">
			<!-- 账密 -->
			<view class="form-user" v-if="loginWay == 0">
				<view class="form-user-one d-rn d-ac">
					<image src="../../static/img/user.png" mode=""></image>
					<input type="text" :placeholder="$t('username')" placeholder-style="color:#CCD0D4;" v-model="form.username" />
				</view>
				<view class="form-user-one d-rn d-ac">
					<image src="../../static/img/pwd.png" mode=""></image>
					<input type="password" placeholder="" placeholder-style="color:#CCD0D4;" v-model="form.password"
						v-if="!ifShowPassWord" />
					<input type="text" :placeholder="$t('password')" placeholder-style="color:#CCD0D4;" v-model="form.password"
						v-if="ifShowPassWord" />
					<image src="../../static/img/open_eyes.png" mode="" @click="ifShowPassWord = !ifShowPassWord"
						v-if="ifShowPassWord"></image>
					<image src="../../static/img/close_eyes.png" mode="" @click="ifShowPassWord = !ifShowPassWord"
						v-if="!ifShowPassWord"></image>
				</view>
			</view>
			<!-- 邮箱 -->
			<view class="form-user" v-show="loginWay == 1">
				<view class="form-user-two d-rn d-ac">
					<image src="../../static/img/email.png" mode=""></image>
					<input type="text" :placeholder="$t('email')" placeholder-style="color:#CCD0D4;" v-model="form.username" />
				</view>
				<view class="form-user-two d-rn d-ac">
					<image src="../../static/img/pwd.png" mode=""></image>
					<input type="text" maxlength="6" :placeholder="$t('captcha')" placeholder-style="color:#CCD0D4;"
						v-model="form.code" />
					<u-code class="code" ref="emailCode" @change="emailCodeChange" keep-running :startText="$t('send_captcha')"
						:endText="$t('resend_captcha')" unique-key="email"></u-code>
					<view class="code" @tap="getEmailCode">{{ emailTips }}</view>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="form-user" v-show="loginWay == 2">
				<view class="form-user-three d-rn d-ac">
					<image src="../../static/img/phone.png" mode=""></image>
					<picker @change="changePhoneType" :range="phoneTypeOptions" range-key="dictLabel" class="picker">
						<view style="font-size: 30rpx; color: #999999">{{ form.areaCode }}</view>
					</picker>
					<image src="../../static/img/select.png" mode=""
						style="width: 12rpx; height: 7rpx; margin-top: 8rpx; margin-left: 10rpx;"></image>
					<text style="color: #e7e7e7; margin-right: 16rpx">|</text>
					<input type="number" :placeholder="$t('phone')" placeholder-style="color:#CCD0D4;" v-model="form.username" />
				</view>
				<view class="form-user-three d-rn d-ac">
					<image src="../../static/img/pwd.png" mode=""></image>
					<input type="text" maxlength="6" :placeholder="$t('captcha')" placeholder-style="color:#CCD0D4;"
						v-model="form.code" />
					<u-code class="code" ref="phoneCode" @change="phoneCodeChange" keep-running :startText="$t('send_captcha')"
						:endText="$t('resend_captcha')" unique-key="phone"></u-code>
					<view class="code" @tap="getPhoneCode">{{ phoneTips }}</view>
				</view>
			</view>
			<view class="form-option d-rn d-ac d-jb">
				<view class="form-option-left d-rn d-ac" @click="handleLoginFree">
					<image v-show="confirmSts" src="../../static/img/comfirm.png"></image>
					<view v-show="!confirmSts" class="comfirm"></view>
					<text>{{ $t('login_free') }}</text>
				</view>
				<view class="form-option-right" @click="handleForgetPwd">
					<text>{{ $t('forgot_password') }}</text>
				</view>
			</view>
			<view class="form-btn d-rn d-ac d-jc" @click="handleLogin">
				<text class="d-rn d-ac d-jc">{{ $t('login') }}</text>
			</view>
			<view class="form-three d-rn d-ac d-jb">
				<text @click="handleChangeWay">{{
        loginWays == 0
          ? $t('email_login')
          : loginWays == 1
            ? $t('phone_login')
            : $t('password-login')
      }}</text>
				<text>|</text>
				<text @click="handleChangeWays">{{
        loginWaya == 0
          ? $t('phone_login')
          : loginWaya == 1
            ? $t('password-login')
            : $t('email_login')
      }}</text>
			</view>
		</view>
		<view class="private">
			<u-checkbox v-model="privacy" @change="checkboxChange" shape="circle"></u-checkbox>
			{{ $t('read_and_agree') }}
			<span @click="navigateToPrivacy('/pages/private/agreement')">{{ $t('agreement') }}</span>
			{{ $t('and') }}
			<span @click="navigateToPrivacy('/pages/private/privacy')">{{ $t('privacy_policy') }}</span>
		</view>
		<view class="footer">
			<image src="../../static/img/head.png" mode=""></image>
		</view>

	</view>
</template>



<script>
	import {
		login,
		getPhoneMessage,
		getEmailMessage
	} from "@/api/login.js";
	import Privacy from "../private/privacy.vue";

	export default {
		data() {
			return {
				index: 0,
				list: [this.$t('simplified'), this.$t('traditional'), this.$t('english')],
				selectLangShow: false,
				privacy: false,
				lanSts: 0,
				confirmSts: false,
				loginWay: 0, // 0，账密  1，邮箱  2，手机号
				loginWays: 0,
				loginWaya: 0,
				emailTips: "",
				phoneTips: "",
				form: {
					areaCode: null,
					code: null,
					loginType: null,
					password: null,
					username: null,
				},
				phoneTypeOptions: [],
				ifShowPassWord: false,
			};
		},
		onLoad() {
			this.getOptions();
		},
		onShow() {
			this.lanSts = uni.getStorageSync('locale') == 'zh-Hans' ? 0 : uni.getStorageSync('locale') == 'zh-Hant' ? 1 : uni
				.getStorageSync('locale') == 'en' ? 2 : 0;
			let lang = '';
			if (this.lanSts == 0) {
				lang = 'zh-Hans'
			} else if (this.lanSts == 1) {
				lang = 'zh-Hant'
			} else if (this.lanSts == 2) {
				lang = 'en'
			}
			this.$i18n.locale = lang;
		},
		methods: {
			bindPickerChange(e) {
				console.log('e', e)
				this.lanSts = e.detail.value;
				
				let lang = '';
				if (this.lanSts == 0) {
					lang = 'zh-Hans'
				} else if (this.lanSts == 1) {
					lang = 'zh-Hant'
				} else if (this.lanSts == 2) {
					lang = 'en'
				}
				if (lang) {
					uni.setLocale(lang)
					uni.setStorageSync('locale', this.lanSts)
					this.$i18n.locale = lang;
				}
			},
			checkboxChange(e) {
				this.privacy = e;
			},
			navigateToPrivacy(url) {
				console.log("🐛 ~ navigateToPrivacy ~ url:", url)
				uni.navigateTo({
					url
				})
			},
			async getOptions() {
				this.phoneTypeOptions = await this.getDictionaryData("mobile_area_code");
				this.form.areaCode = this.phoneTypeOptions[0].dictValue;
			},
			/*切换手机号类型*/
			changePhoneType(e) {
				const index = e.detail.value;
				this.form.areaCode = this.phoneTypeOptions[index].dictValue;
			},
			/*发送邮箱验证码*/
			getEmailCode() {
				if (uni.$u.test.email(this.form.username)) {
					if (this.$refs.emailCode.canGetCode) {
						getEmailMessage({
							username: this.form.username,
						}).then((res) => {
							uni.$u.toast(this.$t('captcha_sent'));
							this.$refs.emailCode.start();
						});
					} else {
						uni.$u.toast(this.$t('wait_countdown'));
					}
				} else {
					uni.$u.toast(this.$t('enter_valid_email'));
				}
			},
			emailCodeChange(text) {
				// console.log("🐛 ~ emailCodeChange ~ text:", text)
				this.emailTips = text;
				// if(text=='发送手机验证码'){
				//   this.emailTips = this.$t('send_captcha')
				// }else if(text=='重新获取'){
				//   this.emailTips = this.$t('resend_captcha')
				// }
			},
			/*发送手机验证码*/
			getPhoneCode() {
				if (this.form.username) {
					if (this.$refs.phoneCode.canGetCode) {
						getPhoneMessage({
							username: this.form.username,
							areaCode: this.form.areaCode,
						}).then((res) => {
							uni.$u.toast(this.$t('captcha_sent'));
							this.$refs.phoneCode.start();
						});
					} else {
						uni.$u.toast(this.$t('wait_countdown'));
					}
				} else {
					uni.$u.toast(this.$t('enter_phone'));
				}
			},
			phoneCodeChange(text) {
				// if(text=='发送手机验证码'){
				//   this.phoneTips = this.$t('send_captcha')
				// }else if(text=='重新获取'){
				//   this.phoneTips = this.$t('resend_captcha')
				// }
				this.phoneTips = text;
			},
			handleChangeLang() {
				console.log('切换语言', this.$refs.phoneCode)
				// this.$refs.phoneCode.reset();
				this.lanSts++;
				if (this.lanSts > 2) this.lanSts = 0;
				let lang = '';
				if (this.lanSts == 0) {
					lang = 'zh-Hans'
				} else if (this.lanSts == 1) {
					lang = 'zh-Hant'
				} else if (this.lanSts == 2) {
					lang = 'en'
				}
				if (lang) {
					uni.setLocale(lang)
					uni.setStorageSync('locale', this.lanSts)
					this.$i18n.locale = lang;
				}

			},
			handleLoginFree() {
				this.confirmSts = !this.confirmSts;
			},
			handleLogin() {
				console.log('privacy', this.privacy)
				if (!this.privacy) {
					uni.$u.toast(this.$t('read_and_agree') + this.$t('agreement') + this.$t('and') + this.$t('privacy_policy'));
					return;
				}
				if (this.confirmSts) {
					this.form.loginFree = 1;
				} else {
					delete this.form.loginFree
				}
				if (this.loginWay == 0) {
					if (!this.form.username) {
						uni.$u.toast(this.$t('enter-username'));
						return;
					}
					if (!this.form.password) {
						uni.$u.toast(this.$t('enter-password'));
						return;
					}
				} else if (this.loginWay == 1) {
					if (!this.form.username) {
						uni.$u.toast(this.$t('enter-email'));
						return;
					}
					if (!this.form.code) {
						uni.$u.toast(this.$t('enter_captcha'));
						return;
					}
				} else if (this.loginWay == 2) {
					if (!this.form.username) {
						uni.$u.toast(this.$t('enter_phone'));
						return;
					}
					if (!this.form.code) {
						uni.$u.toast(this.$t('enter_captcha'));
						return;
					}
				}
				this.form.loginType = this.loginWay;
				login(this.form).then((res) => {
					if (res.token) {
						uni.setStorageSync("token", res.token);
						this.$store.dispatch("actionGetUserInfo").then((res) => {
							uni.reLaunch({
								url: "/pages/index/index",
							});
						});
					}
				});
			},
			handleChangeWay() {
				if (!this.loginWays) {
					this.loginWays = 1;
					this.loginWay = 1;
					this.loginWaya = 1;
				} else if (this.loginWays == 1) {
					this.loginWays = 2;
					this.loginWay = 2;
					this.loginWaya = 2;
				} else {
					this.loginWays = 0;
					this.loginWay = 0;
					this.loginWaya = 0;
				}
				this.resetForm();
			},
			resetForm() {
				this.form.code = null;
				this.form.password = null;
				this.form.username = null;
			},
			handleChangeWays() {
				if (!this.loginWaya) {
					this.loginWaya = 2;
					this.loginWay = 2;
					this.loginWays = 2;
				} else if (this.loginWaya == 1) {
					this.loginWaya = 2;
					this.loginWay = 0;
					this.loginWays = 1;
				} else {
					this.loginWaya = 0;
					this.loginWay = 1;
					this.loginWays = 2;
				}
				this.resetForm();
			},
			handleForgetPwd() {
				this.goLink(`/pages/forgetPwd/index`);
			},
		},
	};
</script>


<style scoped lang="scss">
	page {
		background: #ffffff;
	}

	.comfirm {
		width: 34rpx;
		height: 34rpx;
		border-radius: 100%;
		border: 2rpx solid #999999;
	}

	.container {
		width: 100%;

		.topFixed {
			width: 100%;
			position: fixed;
			z-index: 60;
			top: 0;
			left: 0;
			background-color: #ffffff;
		}

		// 导航栏
		.topNav {
			width: 100%;
			box-shadow: 0px 0px 4rpx 0px rgba(0, 0, 0, 0.3);
			box-sizing: border-box;
			position: relative;

			&-min {
				width: 100%;
				position: absolute;
				left: 0;

				image {
					width: 100%;
					height: 154rpx;
					box-sizing: border-box;
				}

				text {
					display: block;
					font-size: 32rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}
		}

		.tips {
			padding: 168rpx 44rpx 0;
			box-sizing: border-box;

			text:nth-of-type(2) {
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				background-color: #fdc41f;
				font-size: 28rpx;
				font-family: TENGXZTB;
				color: #17171a;
			}
		}

		.logo {
			margin: 90rpx 0 70rpx 0;

			image {
				width: 406rpx;
				height: 136rpx;
			}
		}

		.form {
			width: 80%;
			margin: 0 auto;

			&-user {
				&-one {
					border-radius: 2em;
					background-color: #f6f6f6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					input {
						font-size: 30rpx;
						color: #666;
						flex: 1;
					}
				}

				&-two {
					border-radius: 2em;
					background-color: #f6f6f6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					input {
						font-size: 30rpx;
						color: #666;
						flex: 1;
					}

					image:nth-of-type(2) {
						width: 138rpx;
						height: 56rpx;
					}

					.code {
						color: #fdb911;
						font-size: 28rpx;
					}
				}

				&-three {
					border-radius: 2em;
					background-color: #f6f6f6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					input {
						font-size: 30rpx;
						color: #666;
						flex: 1;
					}

					image:nth-of-type(2) {
						width: 138rpx;
						height: 56rpx;
					}

					.code {
						color: #fdb911;
						font-size: 28rpx;
					}
				}
			}

			&-option {
				margin: 30rpx 0;

				&-left {
					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						margin-left: 16rpx;
						font-size: 30rpx;
						color: #999999;
					}
				}

				&-right {
					text {
						font-size: 30rpx;
						text-decoration: underline;
						color: #666666;
					}
				}
			}

			&-btn {
				text {
					width: 100%;
					height: 90rpx;
					background: #ffdb33;
					border-radius: 2em;
					font-size: 36rpx;
				}
			}

			&-three {
				margin-top: 48rpx;

				text {
					font-size: 30rpx;
					text-decoration: underline;
					color: #666666;
				}

				text:nth-of-type(2) {
					color: #999999;
				}
			}
		}

		.footer {
			width: 100%;
			height: 90rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			image {
				width: 100%;
				height: 90rpx;
				transform: rotateX(180deg);
			}
		}

		.private {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 23px 0 0 37px;
			font-size: 14px;

			span {
				color: blue;
			}
		}
	}
</style>